import { Avatar } from "antd";
import React from "react";
import styles from "./ScoreItem.module.scss";
export default function ScoreItem(props) {
  let rankNum = null;
  switch (props.rank) {
    case 1:
      rankNum = (
        <div
          style={{ color: "#ffda23", fontSize: "22px" }}
          className="iconfont icon-jiangbei"
        ></div>
      );
      break;
    case 2:
      rankNum = (
        <div
          style={{ color: "#c5c5c5", fontSize: "22px" }}
          className="iconfont icon-jiangbei"
        ></div>
      );
      break;
    case 3:
      rankNum = (
        <div
          style={{ color: "#cd9a62", fontSize: "22px" }}
          className="iconfont icon-jiangbei"
        ></div>
      );
      break;
    default:
      rankNum = <div className={styles.rank}>{props.rank}</div>;
  }

  return (
    <>
      <div className={styles.container}>
        {/* 排名、头像、昵称 */}
        <div className={styles.left}>
          {rankNum}
          <div className={styles.avatar}>
            <Avatar size="samll" src={props.rankInfo.avatar} />
          </div>
          {props.rankInfo.nickname}
        </div>
        {/* 积分 */}
        <div className={styles.right}>{props.rankInfo.points}</div>
      </div>
    </>
  );
}
